<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>{$website['name']|default=''|htmlentities} – {$site.name|htmlentities}</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <meta name="renderer" content="webkit">
    <meta name="keywords" content="{$website['keywords']|htmlentities}">
    <meta name="description" content="{$website['description']|htmlentities}">
    <link rel="shortcut icon" href="__CDN__/assets/img/favicon.ico" />
    <link href="/assets/css/frontend.css" rel="stylesheet">
    <link href="/assets/css/common.css" rel="stylesheet">
    <script type="text/javascript">
        var require = {
            config: JSON.parse('{$config|json_encode}')
        };
    </script>
    <!-- HTML5 shim, for IE6-8 support of HTML5 elements. All other JS at the end of file. -->
    <!--[if lt IE 9]>
    <script src="__CDN__/assets/js/html5shiv.js"></script>
    <script src="__CDN__/assets/js/respond.min.js"></script>
    <![endif]-->
    <style>
        .category-header {padding: 4px 8px;font-weight: 600;}
        .submenu-item {padding:4px 0 4px 16px }
        .content .content-nav{justify-content: end;}
        .content .content-nav .nav-items{cursor: pointer;}
    .resource-card {
        background: #fff;
        border-radius: 8px;
        box-shadow: 0 2px 8px rgba(0,0,0,0.1);
        overflow: hidden;
        transition: transform 0.3s ease;
        cursor: pointer;
        display:flex;
        flex-direction: column;
    }
    .resource-card:hover {
        transform: translateY(-5px);
    }
    .resource-head{
        display: flex;padding:8px;
        align-items: center;
    }
    .resource-head h3{
        flex:1;
        font-size: 16px;
        margin:0;
    }
    .resource-head span{
        margin-left: 10px;
    }
    .resource-con{
        flex:1;display:flex;flex-direction: column; font-size: 14px;
    }
    .resource-image {
        height: 200px;
        overflow: hidden;
    }
    .resource-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    .resource-info {
        padding: 15px;
    }
    .resource-title {
        font-size: 16px;
        color: #333;
    }
    .resource-desc {
        font-size: 12px;
        color: #fc8939;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    .resource-meta {
        display: flex;
        justify-content: space-between;
        align-items: center;
        color: #888;
        font-size: 14px;
    }
    </style>
</head>
<body>
    <div id="app">
        <div id="loading" ref="loadNode">
            <div id="loading-center">
                <div id="loading-center-absolute">
                    <div class="object" id="object_four"></div>
                    <div class="object" id="object_three"></div>
                    <div class="object" id="object_two"></div>
                    <div class="object" id="object_one"></div>
                </div>
            </div>
        </div>
        <header class="header">
            <div class="header-container">
                <div class="header-left">
                    <div class="header-logo" @click="handle('/',false)">
                        <img src="__CDN__/assets/img/logo.png" alt="Logo" class="header-logo">
                        <span class="header-title">{$site.name|htmlentities}</span>
                    </div>
                    <nav class="header-nav">
                        <a href="javascript:;" @click="handle(item.url,item.is_login)" :class="item.url =='/resource'?`nav-item active`:`nav-item`" v-for="(item,index) in head">{{item.name}}</a>
                    </nav>
                </div>
                <div class="header-right"  v-if="user">
                    <i class="fa fa-list-alt header-icon" @click="handle('/notice',false)"></i>
                    <div class="user-info" data-toggle="dropdown">
                        <img :src="user.avatar || '__CDN__/assets/img/avatar.png'" class="user-avatar">
                        <span class="user-name">{{ user.nickname }}</span>
                    </div>
                    <ul class="dropdown-menu">
                        <!-- User image -->
                        <li class="user-header" @click="handle('/user/info')">
                            <img :src="user.avatar" class="img-circle" alt="">
                            <p>
                                <div>{{ user.nickname }}</div>
                                <small>闻道ID:{{user.id}}</small>
                            </p>
                        </li>
                        <li class="user-body">
                            <div class="user-list" @click="handle('/user/info')">
                                <div>我的资料</div>
                                <i class="fa fa-chevron-right"></i>
                            </div>
                            <div  class="user-list" @click="handle('/user/favorites')">
                                <div>我的收藏</div>
                                <i class="fa fa-chevron-right"></i>
                            </div>
                            <div class="user-list" @click="handle('/user/adviser')">
                                <div>我的实战</div>
                                <i class="fa fa-chevron-right"></i>
                            </div>
                        </li>
                        <li class="user-body">
                            <div class="user-list" @click="handle('/user/list')">
                                <div>榜单明细</div>
                                <i class="fa fa-chevron-right"></i>
                            </div>
                        </li>
                        <!-- Menu Footer-->
                        <li class="user-footer">
                            <div>
                                <a href="/user/logout"><i class="fa fa-sign-out"></i>
                                    {:__('Logout')}</a>
                            </div>
                        </li>
                    </ul>
                </div>
                <div class="header-right" v-else   @click="handle('/',false)">
                    <i class="fa fa-list-alt header-icon" ></i>
                    <div class="user-info">
                        <i class="fa fa-user-circle fa-fw header-icon" style="margin-right: 5px;"></i>
                        <span class="user-name">登录</span>
                    </div>
                </div>
                
            </div>
        </header>
        <section class="banner">
            <div class="search-container">
                <div class="search-categories">
                    <a href="javascript:;" class="search-category" @click="handle('/',false)">全部</a>
                    <a href="javascript:;" class="search-category"  @click="handle('/wfgroup',true)">闻风楼</a>
                    <a href="javascript:;" class="search-category"  @click="handle('/wpgroup',true)">三十六计</a>
                    <a href="javascript:;" class="search-category"  @click="handle('/adviser',true)">谋士</a>
                    <a href="javascript:;" class="search-category active"  @click="handle('/resource',true)">资源库</a>
                </div>
                <div class="search-box">
                    <input type="text" class="search-input" placeholder="搜索..." v-model="searchQuery" @input="handleSearch" @keydown="handleKeyDown">
                    <button class="search-button" @click="submitSearch"><i class="fa fa-search"></i></button>
                    <div class="search-suggestions" v-if="suggestions.length && showSuggestions" style="z-index: 1000000;">
                        <div class="suggestion-item" v-for="(item, index) in suggestions" :key="index" @click="selectSuggestion(item)">
                            <div class="suggestion-title" v-html="item.text"></div>
                        </div>
                    </div>
                </div>
            </div>
            <div id="headerCarousel" class="carousel slide" data-ride="carousel" data-interval="2500" data-pause="hover">
                <!-- 指示器 -->
                <ol class="carousel-indicators">
                    <template v-for="(item,bi) in banner" :key="bi">
                        <li :data-target="'#headerCarousel'" :data-slide-to="bi" :class="{active: bi === 0}"></li>
                    </template>
                </ol>
            
                <!-- 轮播图片 -->
                <div class="carousel-inner">
                    <div :class="index==0?`item active`:`item`" v-for="(item,index) in banner"  @click="handle(item.url,item.is_login)">
                        <img :src="item.image" :alt="item.title">
                    </div>
                </div>
            
                <!-- 左右切换按钮 -->
                <a class="left carousel-control" href="#headerCarousel" data-slide="prev">
                    
                </a>
                <a class="right carousel-control" href="#headerCarousel" data-slide="next">
                    
                </a>
            </div>
        </section>
        <section class="container">
            <div class="row">
                <div class="col-md-2 hidden-xs">
                    <div class="sidebar-header">
                        <img src="/assets/img/logo.png" class="sidebar-avatar">
                        <span>资源库</span>
                    </div>
                    <div class="category-menu">
                        <template v-for="(item,index) in resouceItem">
                            <div class="category-item">
                                <div class="category-header expanded">
                                    <span>{{item.name}}</span>
                                </div>
                                <div class="category-submenu show">
                                    <template v-for="(itm,idx) in item.item">
                                    <a href="javascript:;" :class="{'submenu-item':true,'active':forms[index].value == itm}" @click="handItem(itm,index)">{{itm}}</a>
                                    </template>
                                </div>
                            </div>
                        </template>
                    </div>

                </div>
                <div class="col-md-7 col-xs-12">
                    <div class="content">
                        <div class="content-top">
                            <div class="content-silder">
                                <div class="content-nav">
                                    <div class="silder-tit">身份类型:</div>
                                    <template v-for="(item,index) in navlist">
                                        <div :class=" navItem == item.id?`nav-items active`:`nav-items`" @click="handleCate(item)">{{item.name}}</div>
                                    </template>
                                </div>
                            </div>
                        </div>
                        <div class="content-list" v-if="list.length >0">
                            <div class="resource-card" v-for="(item, index) in list" :key="index">
                                <div class="resource-head">
                                    <h3 class="resource-title">{{item.title}}</h3>
                                    <i class="fa fa-heart-o" @click="showFavorites(item.id)"></i>
                                </div>
                                <div style="display: flex; padding:8px; color:#444;font-size: 14px;">
                                    <div class="resource-con">
                                        <div>{{resouceItem[0].name}}</div>
                                        <div style="padding-left: 15px;">{{item.form1}}</div>
                                    </div>
                                    <div class="resource-con">
                                        <div>{{resouceItem[1].name}}</div>
                                        <div style="padding-left: 15px;">{{item.form2}}</div>
                                    </div>
                                    <div class="resource-con">
                                        <div>{{resouceItem[2].name}}</div>
                                        <div style="padding-left: 15px;">{{item.form3}}</div>
                                    </div>
                                    <div class="resource-con">
                                        <div>推荐值</div>
                                        <div><i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star-o"></i><i class="fa fa-star-o"></i></div>
                                    </div>
                                </div>
                                <div style="display: flex; padding:8px;">
                                    
                                    <div class="resource-con" style="flex:2;">
                                        <div style="display:flex;">
                                            <img :src="itm" v-for="(itm,idx) in item.images" style="width: 50px; height: 50px; margin-right: 10px; border-radius: 10px;">
                                        </div>
                                    </div>
                                    <div class="resource-con" style="align-items: center;" @click="handleTel(item)">
                                        <div style="color:#333; border:1px solid #333; padding:8px 10px;font-size:15px; border-radius: 5px;">联系询价</div>
                                    </div>
                                </div>
                                <div class="resource-head" @click="handle('/resource/detail?id='+item.id,true)">
                                        <p class="resource-desc">{{item.content}}</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-3 hidden-xs">
                    <div class="sidebar-header" style="flex-direction: column;">
                        <div style="flex:row;align-items: center;">
                            <img src="/assets/img/logo.png" class="sidebar-avatar">
                            <span>资源榜</span>
                        </div>
                        
                    </div>
                    <div style="display: flex; flex-direction: column; background:#fff;">
                        {volist name="source" id="vo"}
                        <a style="display:flex;align-items: center; padding:8px 5px;" href="/resource/detail?id={$vo.id}">
                            <img src="{$vo.image}"  width="50px" height="50px">
                            <div style="display: flex; flex-direction: column;">
                                <div style="font-size: 16px;color:#000;height:28px; line-height: 28px;overflow: hidden;">
                                    {$vo.title}
                                </div>
                                <div style="font-size: 14px;color:#666; height:22px; line-height: 22px;overflow: hidden;">
                                    {$vo.description}
                                </div>
                            </div>
                        </a>
                        {/volist}
                    </div>
                </div>
            </div>
        </section>
    </div>
</body>
<script src="/assets/js/require.js" data-main="/assets/js/require-frontend.js?v={$site.version|htmlentities}"></script>

</html>

